<template>
	<view class="content">
		<view class="headerNav">
		<!-- 	<u-navbar placeholder :border-bottom="false">
				<template v-slot:right>
					<view class="u-flex" @tap="save">
						<text style="font-size: 32rpx;color:#005eff;">保存</text>
					</view>
				</template>
			</u-navbar> -->
		</view>
		<view class="inputBox" style="padding-bottom:140rpx">
			<view class="textView">
				<text>职位描述</text>
				<text>请勿填写QQ、微信、电话等联系方式及特殊符号、性别歧视词、违反劳动法相关内容，否则有可能导致您的账号被封禁。</text>
			</view>
			<u-input :cursor-spacing="35" :adjust-position="true" v-model="code" height="150" type="textarea"
				placeholder="1.工作内容 &#13;&#10;2.任务要求 &#13;&#10;3.特别说明" :maxlength="maxlength" :auto-height="true"
				@input="getnum" />
			<view class="currentWordNumber"><text>{{currentWordNumber}}</text>/{{maxlength}}</view>
		</view>
		<view class="bottomBoxBtn">
			<u-button type="primary" hover-class="none" :customStyle="customStyle" @click="$u.throttle(save, 2000)">保存</u-button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				code: '',
				inputStyle: {
					width: "100%",
					height: "100rpx",
					background: "#fff"
				},
				maxlength: 500,
				currentWordNumber: 0,
				customStyle:{
					background:'#00D075'
				}
			}
		},
		methods: {
			save() {
				if (this.code) {
					if(this.code.length>500){
						this.code = this.code.slice(0, 500)
					} 
					let pages = getCurrentPages()
					let prevPage = pages[pages.length - 2]
					// 3. 给上一页面实例绑定getValue()方法和参数（注意是$vm）
					prevPage.$vm.content = this.code
					uni.navigateBack()

				} else {
					uni.$u.toast('您没有输入任何内容')
				}
			},
			getnum(e) {
				var value = e;
				var len = parseInt(value.length);
				if (len > 500) {
					this.code = value.slice(0, 500)
					this.currentWordNumber = 500
				} else {
					this.currentWordNumber = len
				}
			}
		},
		onLoad({
			content
		}) {
			if (content) {
				this.code = content
				var len = parseInt(this.code.length)
				this.currentWordNumber = len
			}
		}
	}
</script>

<style lang="scss">
	page,
	body {
		width: 100vw;
		height: 100%;
		background-color: #fff;
	}

	.content {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 30rpx;

		.inputBox {
			width: 100%;
			display: flex;
			flex-direction: column;

			.textView {
				color: #867F7F;
				font-size: 26rpx;
				display: flex;
				flex-direction: column;
				margin-bottom: 30rpx;

				text:nth-child(1) {
					color: #000;
					font-size: 36rpx;
					font-weight: bold;
					margin: 20rpx 0;
				}
			}
		}

		.btnBox {
			width: 684rpx;
			height: 68rpx;
			position: fixed;
			bottom: 100rpx;

			button {
				width: 684rpx;
				background-color: #0E6FF7;
				color: #fff;
				height: 68rpx;
				line-height: 68rpx;
				font-size: 28rpx;
				text-align: center;
				font-family: Arial;

				&::after {
					border: none;
				}

			}

		}

	}

	:deep .u-field {
		padding: 0 !important;
		margin: 20rpx 0;
	}

	:deep .u-flex-1 {
		margin: 0 !important;
	}



	.u-flex {
		margin-right: 20rpx;

		text {
			white-space: nowrap !important;
		}
	}

	.currentWordNumber {
		text-align: right;
		text{
			color: #00D075;
		}
	}
	.bottomBoxBtn {
		// height: 140rpx;
		width: calc(100% - 60rpx);
		background-color: #fff;
		position: fixed;
		bottom: 0;
		z-index: 999;
		padding:30rpx 0;
		
	}
</style>